<form class="example-container" [formGroup]="loginOrRegForm">
    <div style="display: flex;justify-content: right;">
        <div (click)="toggleLang()" style="cursor: pointer; text-align: right;margin-top: 8px;margin-right: 8px;">{{'CURRENT_LANG' | translate}}</div>
    </div>
    <div class="example-container2 mobile-view">
        <mat-form-field>
            <mat-label>{{'ENTER_YOUR_EMAIL' | translate}}</mat-label>
            <input matInput formControlName="email">
            <mat-error>{{emailErrorMsg | translate}}</mat-error>
        </mat-form-field>
        <button *ngIf="isRegister" mat-raised-button (click)="getCode()"
            color="primary">{{'GET_ACTIVATION_CODE'| translate}}</button>
        <button *ngIf="!isRegister && forgetPwd" mat-raised-button (click)="getToken()"
            color="primary">{{'GET_PASSWORD_RESET_TOKEN' | translate}}</button>
        <mat-form-field *ngIf="isRegister">
            <mat-label>{{'ACTIVATION_CODE'| translate}}</mat-label>
            <input matInput formControlName="activationCode">
            <mat-error>{{activationCodeErrorMsg | translate}}</mat-error>
        </mat-form-field>
        <mat-form-field *ngIf="!isRegister && forgetPwd">
            <mat-label>{{'ENTER_PASSWORD_RESET_TOKEN'| translate}}</mat-label>
            <input matInput [type]="hide ? 'password' : 'text'" formControlName="token" [autocomplete]="false">
            <mat-error>{{tokenErrorMsg | translate}}</mat-error>
            <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'"
                [attr.aria-pressed]="hide">
                <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
            </button>
        </mat-form-field>
        <mat-form-field>
            <input matInput placeholder="{{'ENTER_YOUR_PASSWORD'| translate}}" [type]="hide ? 'password' : 'text'"
                formControlName="pwd" [autocomplete]="false">
            <mat-error>{{passwordErrorMsg | translate}}</mat-error>
            <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'"
                [attr.aria-pressed]="hide">
                <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
            </button>
        </mat-form-field>
        <mat-form-field *ngIf="isRegister || forgetPwd">
            <input matInput placeholder="{{'CONFIRM_YOUR_PASSWORD'| translate}}" [type]="hide2 ? 'password' : 'text'"
                formControlName="confirmPwd" [autocomplete]="false">
            <mat-error>{{confirmgPasswordErrorMsg | translate}}</mat-error>
            <button mat-icon-button matSuffix (click)="hide2 = !hide2" [attr.aria-label]="'Hide password'"
                [attr.aria-pressed]="hide2">
                <mat-icon>{{hide2 ? 'visibility_off' : 'visibility'}}</mat-icon>
            </button>
        </mat-form-field>
        <button mat-raised-button *ngIf="!isRegister && !forgetPwd" (click)="login()"
            color="primary">{{'LOGIN'| translate}}</button>
        <button mat-raised-button *ngIf="isRegister" (click)="register()"
            color="primary">{{'REGISTER'| translate}}</button>
        <button mat-raised-button *ngIf="!isRegister && forgetPwd"
            (click)="changePassword()" color="primary">{{'CHANGE_PASSWORD'| translate}}</button>
        <div style="display: flex;justify-content: space-between;">
            <a *ngIf="!isRegister && !forgetPwd" (click)="forgetPwd=true"
                class="forget-pwd">{{'FORGET_PASSWORD'| translate}}</a>
            <a *ngIf="!isRegister && !forgetPwd" (click)="isRegister=true"
                class="forget-pwd">{{'REGISTER'| translate}}</a>
            <a *ngIf="!isRegister && forgetPwd" (click)="forgetPwd=false"
                class="forget-pwd">{{'GO_BACK_TO_LOGIN'| translate}}</a>
            <a *ngIf="isRegister" (click)="isRegister=false"
                class="forget-pwd">{{'GO_BACK'| translate}}</a>
        </div>
    </div>
</form>